<!-- 登录页面 -->
<template>
  <van-form class="login" @submit="handleSubmit">
    <!-- Logo -->
    <van-image
      class="avatar"
      round
      :src="formData.logoUrl"
    />

    <!-- 用户表单数据 -->
    <van-cell-group inset>
      <van-field
        v-model="formData.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
        required
        clearable
      />
      <!-- 密码登录 -->
      <van-field
        v-if="formData.isPassword"
        v-model="formData.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        required
        clearable
      />
      <!-- 短信登录 -->
      <van-field
        v-else
        v-model="formData.captcha"
        type="text"
        name="验证码"
        label="短信验证码"
        placeholder="短信验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
        required
        clearable
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            :disabled="formData.isCaptcha"
            @click="initCapcha"
          >
            {{ formData.captchaText }}
          </van-button>
        </template>
      </van-field>
    </van-cell-group>

    <!-- 提交区域 -->
    <div style="margin: 16px;">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
      >
        提交
      </van-button>
      <!-- 改变登录方式 -->
      <span class="change_btn" @click="changeLoginMode">
        {{ formData.changeText }}
      </span>
    </div>
  </van-form>
</template>

<script setup>
// -------------------------------- 导入模块 --------------------------------
// 导入 vue3 的 API
import { reactive, computed } from 'vue'
// 导入 useRouter 操作路由模块，导入 userRoute 路由信息模块
import { useRoute, useRouter } from 'vue-router'

// 导入用户请求接口
// 1、getVerifyCode：获取用户校验码
// 2、getCaptcha：获取短信验证码
// 3、loginByPassword：密码登录接口
// 4、loginByCaptcha：验证码登录接口
import { getVerifyCode, getCaptcha, loginByPassword, loginByCaptcha } from '@/api/user_api'
// 导入首页请求接口
// 1、getLogo：获取 logo 图片
import { getLogo } from '@/api/home_api'

// 导入 vant 组件，按需引入
import {
  Form as VanForm,
  Image as VanImage,
  CellGroup as VanCellGroup,
  Field as VanField,
  Button as VanButton,
  Toast
} from 'vant'
// 导入 vant 的组合式 API
// 1、useCountDown：倒计时管理能力
import { useCountDown } from '@vant/use'

// 导入 pinia 实例
import { useUserStore } from '@/store_pinia' // 用户数据状态管理

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// -------------------------------- 声明数据 --------------------------------
// 表单绑定的数据
const formData = reactive({
  logoUrl: '',
  username: '17201234567', // 用户名
  password: 'qwer1234', // 密码
  captcha: '', // 短信
  loginMode: 'password', // 登录模式（密码登录、短信登录）
  isPassword: computed(() => formData.loginMode === 'password'), // 检测是否为密码登录模式
  changeText: computed(() => formData.isPassword ? '验证码登录' : '密码登录'), // 控制切换按钮的文字内容
  isCaptcha: false, // 存储发送验证码的状态，false 为没发送；true 为发送
  countDown: null, // 存储的倒计时实例
  captchaText: computed(() => formData.isCaptcha ? formData.countDown.seconds + 's后再发送' : '发送验证码') // 根据状态设置要显示的内容
})
const userStore = useUserStore() // 实例化用户状态容器
const router = useRouter() // 实例化路由实例
const route = useRoute() // 实例化路由信息实例

// -------------------------------- 函数封装 ---------------------------------
// 获取 logo 图信息
const initLogo = async () => {
  const data = await getLogo()
  const result = judgeRequest(data.status, '网络开小差了，请稍后再试~') // 判断请求结果

  // 如果请求成功
  if (result) {
    formData.logoUrl = 'https://pic4.zhimg.com/v2-1ce31ed8d60950cabb1a85e8c8a0fc57_b.jpg' || data.logo_url // 获取 logo 地址
  }
}

// 切换登录模式函数
const changeLoginMode = () => {
  // 更改登录模式
  formData.loginMode = formData.isPassword ? 'captcha' : 'password'
  // 清空密码与验证码的输入框内容
  formData.password = ''
  formData.captcha = ''
}

// 验证码登录
const initCapcha = async () => {
  // 手机号规则校验
  if (!/^1\d{10}$/.test(formData.username)) {
    // 如果是一个正规的手机号
    return Toast('请输入正确的手机号！')
  }

  const verifyCode = await getVerifyCode() // 发送获取校验码请求
  const result = judgeRequest(verifyCode.status, '网络开小差了，请稍后再试~') // 判断请求结果

  // 如果请求成功，就继续发送获取验证码请求
  if (result) {
    const captcha = await getCaptcha({
      key: verifyCode.data.key, // 校验码
      phone: formData.username, // 手机号
      type: 'login' // 验证类型，login 为登录
    })

    const result = judgeRequest(captcha.status, '获取验证码失败！') // 判断请求结果

    // 如果请求成功，将发送验证码按钮禁用掉，60s后才可以继续发送
    if (result) {
      const countDown = useCountDown({
        time: 3 * 1000, // 实际上是 60 *1000，这里演示个 10s，不然太费时间
        // 倒计时结束的回调函数
        onFinish () {
          formData.isCaptcha = false // 更改该发送状态
        }
      })

      countDown.start() // 开启倒计时
      formData.isCaptcha = true // 更改发送状态
      formData.countDown = countDown.current
    }
  }
}

// 表单提交函数，登录事件
const handleSubmit = async () => {
  // 先校验用户名
  const username = formData.username.trim()
  if (username === '') {
    return Toast('用户名不能为空！')
  }

  let data = '' // 存储请求数据
  if (formData.isPassword) {
    // 如果是密码登录
    // 先校验密码
    const password = formData.password.trim()
    if (password === '') {
      return Toast('密码不能为空！')
    }

    // 发送密码登录请求
    data = await loginByPassword({
      account: username, // 账号
      password: password // 密码
    })

    const result = judgeRequest(data.status, '网络开小差了，请稍后再试~') // 判断请求结果
    // 请求成功，调用登陆成的处理函数
    if (result) {
      loginSuccess(data.data)
    }
  } else {
    // 如果是验证码登录
    // 先校验验证码
    const captcha = formData.captcha.trim()
    if (captcha === '') {
      return Toast('验证码不能为空！')
    }

    // 发送验证码登录请求
    data = await loginByCaptcha({
      phone: username, // 账号
      captcha: captcha // 验证码
    })

    const result = judgeRequest(data.status, '网络开小差了，请稍后再试~') // 判断请求结果
    // 请求成功，调用登陆成的处理函数
    if (result) {
      loginSuccess(data.data)
    }
  }
}

// 登陆成功后的处理函数
const loginSuccess = (data) => {
  userStore.setUser(data) // 存储用户数据
  router.push(route.query.redirect ?? '/user') // 跳转到用户页
}

// --------------------------------- 函数调用 -----------------------------------
initLogo()
</script>

<style lang="scss" scoped>
// 整体样式
.login {
  display: flex;
  flex-direction: column;
  width: 100%;

  // Logo
  .avatar {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    margin: 70px 0 10px;
    align-items: center;
  }

  // 改变登录方式区域
  .change_btn {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #999999;
  }
}
</style>
